import type { ReactNode } from "react"
import Image from "next/image"

interface AuthLayoutProps {
  children: ReactNode
  title: string
  description?: string
}

// 认证页面的布局组件，提供一致的页面结构
export function AuthLayout({ children, title, description }: AuthLayoutProps) {
  return (
    <div className="min-h-screen grid lg:grid-cols-2">
      {/* 左侧 - 表单区域 */}
      <div className="flex items-center justify-center p-8">
        <div className="mx-auto w-full max-w-md space-y-6">
          <div className="space-y-2 text-center">
            <h1 className="text-3xl font-bold">{title}</h1>
            {description && <p className="text-muted-foreground">{description}</p>}
          </div>
          {children}
        </div>
      </div>

      {/* 右侧 - 图片区域 */}
      <div className="hidden lg:block bg-muted">
        <div className="relative h-full w-full">
          <Image src="/placeholder.svg?height=1080&width=1920" alt="校园风景" fill className="object-cover" priority />
          <div className="absolute inset-0 bg-black/20 flex items-end p-10">
            <div className="bg-white/90 p-4 rounded-lg max-w-md">
              <h2 className="text-xl font-semibold mb-2">欢迎使用校园门户</h2>
              <p className="text-sm text-muted-foreground">
                在这个安全的平台上访问您的学术资源，与辅导员联系，管理您的教育旅程。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

